        @extends('backend.layouts.default')

        @section('title')修改角色@endsection

        @section('brief')您可以在此页面修改角色信息@endsection

        @section('content')
            @include('backend.commons.sidebar')
            <!-- BEGIN CONTENT -->
            <div class="page-content-wrapper">
                <!-- BEGIN CONTENT BODY -->
                <div class="page-content">
                     <!-- BEGIN PAGE HEADER-->
                    @include('backend.commons.title')
                    <div class="page-bar">
                        <ul class="page-breadcrumb">
                            <li>
                                <i class="icon-home"></i>
                                <a href="{{ url('/admin/dashboard') }}">管理首页</a>
                                <i class="fa fa-angle-right"></i>
                            </li>
                            <li>
                                <a href="{{ url('/admin/roles') }}">角色管理</a>
                                <i class="fa fa-angle-right"></i>
                            </li>
                            <li>
                                <span>@yield('title')</span>
                            </li>
                        </ul>
                    </div>
                    <!-- END PAGE HEADER-->
                    
                    <!-- BEGIN ADD -->
                    <div class="portlet light ">
                        <div class="portlet-body form">
                            <!-- BEGIN FORM-->
                            <form  id="updateRole" class="form-horizontal">
                                <div class="form-body">
                                    <div class="form-group">
                                        <label class="col-md-3 control-label"><span class="required" aria-required="true"> * </span>名称</label>
                                        <div class="col-md-2">
                                            <input type="text" name="name" value="{{ $role->name }}" class="form-control" placeholder="角色代号(英文)">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label"><span class="required" aria-required="true"> * </span>别名</label>
                                        <div class="col-md-2">
                                            <input type="text" name="display_name" value="{{ $role->display_name }}" class="form-control" placeholder="显示名称(中文)">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label"></span>权限</label>
                                        <div class="col-md-2">
                                            <select multiple="multiple" class="multi-select" name="permissions[]">
                                            @foreach($permissionGroups as $permissionGroup)
                                                <optgroup label="{{ $permissionGroup->display_name }}">
                                                    @foreach($permissionGroup->permissions as $permission)
                                                    <option value="{{ $permission->id }}" @if( $role->hasPermission($permission->name) )selected=selected @endif>{{ $permission->display_name }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group last">
                                        <label class="col-md-3 control-label">描述</label>
                                        <div class="col-md-4">
                                            <textarea name="description" class="form-control" rows="3" placeholder="角色描述">{{ $role->description }}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <div class="row">
                                        <div class="col-md-offset-3 col-md-4">
                                            <a href="javascript:;" id="update" class="btn green">保存</a>
                                            <a href="javascript:;" id="updateAndContinue" class="btn green">保存并继续修改</a>
                                            <a href="{{ url('/admin/roles') }}" type="button" class="btn default">返回列表</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <!-- END FORM-->
                        </div>
                    </div>
                    <!-- END EDD -->
                </div>
                <!-- END CONTENT BODY -->

                @push('styles')
                <link href="{{ config('app.static_url') }}assets/global/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
                <link href="{{ config('app.static_url') }}assets/global/plugins/jquery-multi-select/css/multi-select.css" rel="stylesheet" type="text/css" />
                @endpush

                @push('scripts')
                <script src="{{ config('app.static_url') }}assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
                <script src="{{ config('app.static_url') }}assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>
                <script>
                    var doUpdateFunc = function() {
                        var formDom = $('#updateRole');
                        var name = formDom.find('[name=name]').val();
                        var display_name = formDom.find('[name=display_name]').val();
                        var permissions = formDom.find('[name="permissions[]"]').val();
                        var description = formDom.find('[name=description]').val();
                        var redirect = '{{ url('/admin/roles') }}';

                        $.ajax({
                            url: '{{ url('/admin/roles/' . $role->id ) }}',
                            type: 'put',
                            datatype: 'json',
                            formDom: formDom,
                            bindDom: $('#update'),
                            bindType: 'click',
                            bindFunc: doUpdateFunc,
                            data: {
                                name: name, 
                                display_name: display_name, 
                                permissions: permissions,
                                description: description, 
                                redirect:redirect
                            }
                        });
                    };

                    var doUpdateAndContinueFunc = function() {
                        var formDom = $('#updateRole');
                        var name = formDom.find('[name=name]').val();
                        var display_name = formDom.find('[name=display_name]').val();
                        var permissions = formDom.find('[name="permissions[]"]').val();
                        var description = formDom.find('[name=description]').val();

                        $.ajax({
                            url: '{{ url('/admin/roles/' . $role->id ) }}',
                            type: 'put',
                            datatype: 'json',
                            formDom: formDom,
                            bindDom: $('#updateAndContinue'),
                            bindType: 'click',
                            bindFunc: doUpdateAndContinueFunc,
                            data: {
                                name: name, 
                                display_name: display_name, 
                                permissions: permissions,
                                description: description
                            }
                        });
                    };
                    $(function() {
                        $('[name="permissions[]"]').multiSelect({
                            selectableOptgroup: true
                        });

                        $('#update').bind('click', doUpdateFunc);
                        $('#updateAndContinue').bind('click', doUpdateAndContinueFunc);
                    });
                </script>
                @endpush
            </div>
        @endsection